import React, { Component } from 'react'

// react中的路由规则都是以组件的方式定义
import { Route, Link, NavLink } from 'react-router-dom'

// 导入渲染的视图组件
import Home from './views/Home'
import News from './views/News'
import Profile from './views/Profile'

// 样式
import './assets/css/app.css'
import Detail from './views/Detail'

class App extends Component {

  constructor(props) {
    super(props);
  }


  render() {
    return (
      <>
        {/* <ul>
          {
            //  字符串形式申明路由
          }
          <li><Link to="/">首页</Link></li>
          <li><Link to="/news">新闻列表</Link></li>
          {
            // 对象形式
          }
          <li><Link to={{
            pathname: '/profile'
          }}>个人中心</Link></li>
        </ul>
        <br /><br />
        <br /> */}
        <ul>
          <li><NavLink exact activeClassName="active" to="/">首页</NavLink></li>
          <li><NavLink activeClassName="active" to="/news">新闻列表</NavLink></li>
          <li><NavLink activeClassName="active" to="/profile">个人中心</NavLink></li>
        </ul>
        <hr />

        {/* path访问的uri路径  component就是匹配成功后渲染的组件 */}
        {/* exact 严格匹配 */}
        {/* Rouet组件中匹配成功的渲中会自动在this.props添加路由导航相关属性方法 */}
        <Route exact path="/" component={Home} />
        <Route path="/news" component={News} />
        <Route path="/profile" component={Profile} />
        {/* 动态路由 */}
        <Route path="/detail/:id" component={Detail} />
      </>
    )
  }

}
export default App